<template>
  <el-radio-group v-model="internalSex">
    <el-radio :label="SEX.MAN">男</el-radio>
    <el-radio :label="SEX.WOMAN">女</el-radio>
  </el-radio-group>
</template>

<script>
import { SEX } from '@/constant/user'

export default {
  name: 'SexRadio',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 内部使用的变量 与外部传入的value保持同步
      internalSex: this.value,
      SEX: SEX
    }
  },
  watch: {
    internalSex(newVal) {
      // 监听内部变量变化 并同步到外部value
      this.$emit('input', newVal)
    },
    value(newVal) {
      // 监听外部value变化 并同步到内部变量
      this.internalSex = newVal
    }
  }
}
</script>
